<script setup lang="ts">
import { ArrowUpBold } from '@element-plus/icons-vue'
import APIDetails from '@/api/details'
import { ElMessageBox, ElMessage, ElLoading } from 'element-plus'
import { Decimal } from 'decimal.js'
import { useAuth } from '@/stores/index'

const checkList = ref<any>([])

const isShowBox = shallowRef(false)
const sum = shallowRef<number>(0)

const { token } = storeToRefs(useAuth())

window.addEventListener('scroll', function () {
    const scrollTop = this.document.documentElement.scrollTop || this.document.body.scrollTop
    if (scrollTop >= 500) {
        isShowBox.value = true
    } else {
        isShowBox.value = false
    }
})

function handleGoTop() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    })
}

const shopCartList = ref<any>([])

function getShopCart() {
    checkList.value = []
    APIDetails.getShopCart().then(({ data }) => {
        shopCartList.value = data
    })
}

function handleRemove(id: number) {
    ElMessageBox.confirm(
        '是否删除？',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        return APIDetails.cancelShopCart(id)
    }).then(() => {
        ElMessage.success('删除成功')
        getShopCart()
    }).catch(() => {
        ElMessage.info('已取消')
    })
}


watch(checkList, (newValue) => {
    let num = 0
    newValue.forEach((item: any) => {
        num = new Decimal(num).add(new Decimal(Number(item.price))).toNumber()
    })
    sum.value = num
}, { deep: true })

function onHide() {
}


const dialogVisible = shallowRef<boolean>(false)

const cartForOrderList = ref<any[]>([])
function handleSettleAccounts() {
    if (checkList.value.length == 0) return ElMessage({
        message: '请勾选结算的订单',
        type: 'error',
        offset: 80
    })
    dialogVisible.value = true
    const shop_id = checkList.value.map((item: any) => item.id).join(',')
    getWallet()
    APIDetails.getCartForOrder(shop_id).then(({ data }) => {
        cartForOrderList.value = data
    })
}

const walletNumber = shallowRef<number>(0)

function getWallet() {
    APIDetails.getWallet().then(({ data }) => {
        walletNumber.value = data.Wallet
    })
}

function onBeforeClose() {
    confirmed.value = undefined
    dialogVisible.value = false
}

const confirmed = shallowRef<any>()

function submitPay() {
    if (!confirmed.value) return ElMessage.error('请先勾选确认订单信息，并认可《心安元素授权服务协议》及《产品退款规则》')
    const order: any = cartForOrderList.value.map((item: any) => {
        return {
            id: item.goods.id,
            goods_id: item.goods.goods_id,
            type: item.goods.type,
            using_body: item.cart_info.using_body,
            auth_type: item.cart_info.auth_type,
            auth_detail: item.cart_info.auth_detail,
            auth_duration: item?.cart_info?.auth_duration,
            market_price: item.cart_info.market_price,
            get_price: item.cart_info.get_price,
            total_amount: item.cart_info.get_price,
            cart_id: item.cart_id,
            transport_id: item.cart_info.transport_id
        }
    })

    const formData = {
        order,
        total_amount: sum.value
    }
    const loading = ElLoading.service({ lock: true })
    APIDetails.setCartOrder(formData).then(() => {
        ElMessage.success('支付成功')
        onBeforeClose()
    }).finally(() => {
        loading.close()
    })
}
function handleJumpWallet() {
    window.location.href = `${import.meta.env.VITE_APP_CONSOLE_URL}/wallet`
}

const $router = useRouter()

function handleJumpView(name: string) {
    window.open($router.resolve(`/${name}`).href, '_blank')
}

</script>

<template>
    <div class="palette-button">
        <div style="width: 40px; height: 40px;">
            <div class="top" v-if="isShowBox" @click="handleGoTop">
                <el-icon>
                    <ArrowUpBold />
                </el-icon>
            </div>
        </div>
        <el-popover v-if="token" placement="right-end" trigger="hover"
            :popper-style="{ 'min-width': '320px', padding: 0, 'border-radius': '0px', 'border': 'none' }"
            @show="getShopCart" @hide="onHide">
            <template #reference>
                <div class="shopping">
                    购
                </div>
            </template>
            <div class="shopping-box">
                <div class="shopping-title">
                    <img src="./images/fa-cart-plus.png" alt="fa-cart-plus">
                    <div>购物车</div>
                </div>
                <div class="shopping-content">
                    <div class="shopping-content-item" v-for="item in shopCartList" :key="item">
                        <div class="shopping-content-item-info">
                            <input type="checkbox" v-model="checkList" :value="item" />
                            <div class="item-info-image">
                                <img v-if="item.image" :src="item.image" alt="image">
                            </div>
                            <div class="item-info-text">
                                <p>{{ item.title }}</p>
                                <p>{{ item.auth_detail }}</p>
                                <p>￥ {{ item.price }}</p>
                            </div>
                        </div>
                        <div class="shopping-content-item-time">{{ item?.create_time?.split(' ')[0] }}</div>
                        <div class="shopping-content-item-delete" @click="handleRemove(item.id)">删除</div>
                    </div>
                </div>
                <div class="shopping-settle">
                    <div>合计费用：</div>
                    <div>￥{{ sum }}</div>
                    <button :class="{ 'btn-active': checkList?.length != 0 }" @click="handleSettleAccounts">去结算</button>
                </div>
            </div>
        </el-popover>
        <el-popover placement="right-end" trigger="hover" :popper-style="{ width: '190px', padding: 0 }">
            <template #reference>
                <div class="question">
                    ?
                </div>
            </template>
            <div class="question-box">
                <div class="phone">
                    <p>客服热线：</p>
                    <p>18908478801</p>
                </div>
                <div class="question-box-item" @click="handleJumpView('service')">
                    <img src="./images/icon-1.png" alt="icon">
                    <p>在线客服</p>
                </div>
                <div class="question-box-item" @click="handleJumpView('help')">
                    <img src="./images/icon-2.png" alt="icon">
                    <p>帮助中心</p>
                </div>
                <div class="question-box-item" @click="handleJumpView('feedback')">
                    <img src="./images/icon-3.png" alt="icon">
                    <p>需求反馈</p>
                </div>
            </div>
        </el-popover>
        <el-dialog class="upload-blockchain" v-model="dialogVisible" width="1000" destroy-on-close
            :before-close="onBeforeClose" :show-close="false">
            <template #header>
                <DialogClose title="支付" @close="onBeforeClose" />
            </template>
            <el-carousel :autoplay="false" indicator-position="none">
                <el-carousel-item v-for="item in cartForOrderList" :key="item">
                    <div class="upload-blockchain-top">
                        <div class="video">
                            <div v-if="item?.goods?.type == 'video'">
                                <video v-if="item?.goods?.sample" controls :src="item?.goods?.sample"></video>
                            </div>
                            <div v-if="item?.goods?.type != 'video'">
                                <img v-if="item?.goods?.image" :src="item?.goods?.image" alt="image">
                            </div>
                        </div>
                        <div class="video-info">
                            <div class="video-info-title">
                                产品信息：
                            </div>
                            <div class="video-info-item">
                                <span style="font-family: 'SOURCEHANSANSCN-LIGHT';">名 字：</span>{{ item?.goods?.title }}
                            </div>
                            <div class="video-info-item">
                                <span style="font-family: 'SOURCEHANSANSCN-LIGHT';">类 型：</span><span
                                    v-if="item?.goods?.type == 'video'">视频素材</span>
                                <span v-if="item?.goods?.type == 'picture'">图片素材</span>
                                <span v-if="item?.goods?.type == 'music'">音乐素材</span>
                                <span v-if="item?.goods?.type == 'font'">字体素材</span>
                            </div>
                            <div class="video-info-item">
                                <span style="font-family: 'SOURCEHANSANSCN-LIGHT';">编 号：</span>{{
                                item?.goods?.goods_code }}
                            </div>
                            <div class="video-info-title">
                                授权信息：
                            </div>
                            <div class="video-info-item">
                                <span style="font-family: 'SOURCEHANSANSCN-LIGHT';">使用主体：</span>{{
                                item?.cart_info?.using_body
                                }}
                            </div>
                            <div class="video-info-item">
                                <span style="font-family: 'SOURCEHANSANSCN-LIGHT';">授权类型：</span>{{
                                item?.cart_info?.auth_type }}
                            </div>
                            <div class="video-info-item">
                                <span style="font-family: 'SOURCEHANSANSCN-LIGHT';">授权详情：</span>{{
                                item?.cart_info?.auth_detail
                                }}
                            </div>
                            <div class="video-info-item" v-if="item?.cart_info?.auth_duration">
                                <span style="font-family: 'SOURCEHANSANSCN-LIGHT';">授权时长：</span>{{ item?.cart_info?.auth_duration }}
                            </div>
                            <div class="video-info-item">
                                <span style="font-family: 'SOURCEHANSANSCN-LIGHT';">价格：</span>{{ item?.cart_info?.get_price }}
                            </div>
                            <div class="video-info-item">
                                <span style="font-family: 'SOURCEHANSANSCN-LIGHT';">市场价：</span>{{ item?.cart_info?.market_price }}
                            </div>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
            <div>
                <div class="upload-blockchain-money">
                    <div></div>
                    <div>本订单才有余额抵扣（当前账户余额 <span>￥{{ walletNumber }}</span> 元）
                        请保证有足够的余额，余额不够时，请点击“<span @click="handleJumpWallet">充值</span>”来增加余额）</div>
                </div>
                <div class="upload-blockchain-sum">
                    <div>应付金额：</div>
                    <div>￥{{ sum }}</div>
                </div>
                <div class="upload-blockchain-affirm">
                    <el-radio :value="true" size="large" v-model="confirmed" text-color="#606266">
                        <div style="color: #606266; font-family: 'SOURCEHANSANSCN-LIGHT';">确认订单信息，并认可<span
                                class="active">《心安元素授权服务协议》</span>及<span class="active">《产品退款规则》</span></div>
                    </el-radio>
                </div>
                <div class="upload-blockchain-btn">
                    <button @click="submitPay">支付</button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.upload-blockchain {

    .upload-blockchain-btn {
        display: flex;

        button {
            width: 176px;
            height: 50px;
            border-radius: 5px;
            background-color: rgba(249, 20, 20, 1);
            color: rgba(255, 255, 255, 1);
            font-size: 14px;
            text-align: center;
            border: none;
            cursor: pointer;
            margin-left: auto;
            margin-right: 42px;
        }
    }

    .upload-blockchain-affirm {
        display: flex;
        justify-content: flex-end;
        margin-right: 42px;

        .active {
            color: #3894FF;
        }
    }

    .upload-blockchain-sum {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        margin-right: 42px;
        margin-top: 10px;

        div {
            &:nth-child(1) {
                color: rgba(16, 16, 16, 1);
                font-size: 14px;
            }

            &:nth-child(2) {
                color: rgba(249, 20, 20, 1);
                font-size: 36px;
                line-height: 1em;
                font-weight: 700;
            }
        }
    }

    .upload-blockchain-money {
        display: flex;
        justify-content: center;
        gap: 0 16px;
        margin-top: 56px;
        font-family: 'SOURCEHANSANSCN-LIGHT';

        div {
            &:nth-child(1) {
                width: 4px;
                height: 50px;
                background-color: #FF0000;
            }

            &:nth-child(2) {
                width: 860px;
                height: 50px;
                line-height: 50px;
                border-radius: 5px;
                background-color: rgba(238, 238, 239, 1);
                border: 1px dashed rgba(187, 187, 187, 1);
                font-size: 14px;
                color: #3894FF;
                text-align: center;

                span {
                    color: #F91414;
                    cursor: pointer;
                }
            }
        }
    }

    .upload-blockchain-top {
        display: flex;
        gap: 0 44px;

        .video-info {
            color: rgba(16, 16, 16, 1);

            .video-info-title {
                color: rgba(16, 16, 16, 1);
                font-size: 14px;
                display: flex;
                align-items: center;
                line-height: 20px;
                margin-bottom: 10px;
                font-family: 'SOURCEHANSANSCN-REGULAR';

                &::before {
                    content: '';
                    display: block;
                    width: 3px;
                    height: 14px;
                    background-color: #FF0000;
                    margin-right: 8px;
                }
            }

            .video-info-item {
                color: rgba(16, 16, 16, 1);
                font-size: 14px;
                margin: 10px 0;
                font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
            }
        }

        .video {
            width: 256px;
            height: 256px;
            background-color: #eeeeee;
            display: flex;
            align-items: center;

            div {
                width: 100%;
                height: 100%;

                video {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }


        }
    }

}

.shopping-box {


    .shopping-content {
        height: 405px;
        padding-top: 20px;
        overflow-y: auto;

        .shopping-content-item {
            box-sizing: border-box;
            width: 280px;
            height: 115px;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 1);
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            box-shadow: 0px 0px 7px 1px #a1a1a1;
            margin: 0 auto;
            margin-bottom: 20px;
            padding: 0 8px;
            padding-top: 14px;
            padding-bottom: 14px;
            position: relative;

            .shopping-content-item-delete {
                position: absolute;
                color: rgba(187, 187, 187, 1);
                font-size: 13px;
                right: 135px;
                bottom: 8px;
                cursor: pointer;
                opacity: 0;
                transition: all .2s;
            }

            &:hover {
                .shopping-content-item-delete {
                    opacity: 1;
                }
            }


            .shopping-content-item-time {
                color: rgba(187, 187, 187, 1);
                font-size: 12px;
                margin-left: 23px;
                margin-top: 5px;
            }

            .shopping-content-item-info {
                display: flex;
                align-items: center;

                .item-info-image {
                    width: 70px;
                    height: 55px;
                    background-color: #eeeeee;
                    margin-left: 10px;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .item-info-text {
                    width: 156px;
                    height: 70px;
                    margin-left: 16px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    p {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        line-height: 1em;

                        &:nth-child(1) {
                            color: rgba(16, 16, 16, 1);
                            font-size: 15px;
                        }

                        &:nth-child(2) {
                            color: rgba(187, 187, 187, 1);
                            font-size: 13px;
                        }

                        &:nth-child(3) {
                            color: rgba(249, 20, 20, 1);
                            font-size: 18px;
                        }
                    }
                }
            }
        }
    }

    .shopping-settle {
        height: 128px;
        border-top: 1px solid rgba(187, 187, 187, 1);

        div {
            width: 270px;
            margin: 0 auto;
            line-height: 1em;

            &:nth-child(1) {
                color: rgba(187, 187, 187, 1);
                font-size: 14px;
                margin-top: 10px;
            }

            &:nth-child(2) {
                color: rgba(255, 0, 0, 1);
                font-size: 20px;
                margin-top: 10px;
            }
        }

        button {
            display: block;
            width: 270px;
            height: 40px;
            margin: 0 auto;
            margin-top: 15px;
            line-height: 20px;
            border-radius: 5px;
            background-color: rgba(187, 187, 187, 1);
            color: #ffffff;
            font-size: 14px;
            border: none;
            cursor: pointer;
            transition: all .2s;
        }

        .btn-active {
            background-color: rgb(255, 0, 0);
        }
    }


    .shopping-title {
        height: 48px;
        background-color: rgba(255, 0, 0, 1);
        display: flex;
        align-items: center;

        img {
            width: 24px;
            height: 24px;
            display: block;
            margin-left: 20px;
        }

        div {
            line-height: 1em;
            border-left: 1px solid #ffffff;
            color: #ffffff;
            font-size: 14px;
            padding-left: 10px;
            margin-left: 10px;
        }
    }
}

.palette-button {
    position: fixed;
    right: 30px;
    bottom: 120px;
    z-index: 35;
    height: 45px;
    border-radius: 50%;

    .top {
        width: 40px;
        height: 40px;
        background-color: #DBDBDB;
        border-radius: 50%;
        color: #ffffff;
        line-height: 40px;
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .question,
    .shopping {
        width: 40px;
        height: 40px;
        background-color: #DBDBDB;
        border-radius: 50%;
        margin: 5px 0;
        text-align: center;
        color: #ffffff;
        line-height: 40px;
        font-size: 20px;
        cursor: pointer;
    }

    .question {
        font-size: 24px;
    }

}

.question-box {
    background-color: #F5F7FA;
    overflow: hidden;


    .phone {
        line-height: 23px;
        color: rgba(16, 16, 16, 1);
        font-size: 16px;
        text-align: center;
        padding: 10px 0;
    }

    .question-box-item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0;
        gap: 0 10px;
        cursor: pointer;

        img {
            width: 24px;
            height: 24px;
            display: block;
        }
    }
}
</style>
